<template>
  <div class="rank-box">
    <van-nav-bar
      title="排行榜"
    />

    <!-- <div class="container"> -->
      <van-tabs
        v-model="active"
        color="blue"
        @change="changeTabs"
        :line-width="30"
        sticky
      >
        <van-tab title="推荐">
          <van-pull-refresh
            v-model="isLoadingRecommend"
            @refresh="onRefreshRecommend"
          >
            <van-list
              v-model="loadingRecommend"
              :finished="finishedRecommend"
              @load="onLoadRecommend"
              :immediate-check="false"
            >
              <van-row
                class="section-item"
                v-for="(item, index) in listRecommend"
                :key="index"
                @click.native="jumpToDetail(item)"
              >
                <van-col class="section-item-index" span="2">
                  {{ index + 1 }}
                </van-col>
                <van-col class="section-item-left" span="6">
                  <div class="section-img">
                    <img :src="item.logo">
                  </div>
                </van-col>
                <van-col span="12">
                  <p class="section-item-title">{{ item.name }}</p>
                  <p class="section-item-desc">{{ item.short_desc }}</p>
                  <!-- <p class="section-item-label">
                    <span>{{ item.label }}</span>
                  </p> -->
                </van-col>
                <van-col span="4" style="text-slign: right;">
                  <van-button
                    class="section-btn"
                    @click.stop="downLoadApk(item.ios_url, item.android_url)"
                  >访问</van-button>
                </van-col>
              </van-row>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="下载量">
          <van-pull-refresh
            v-model="isLoadingDownload"
            @refresh="onRefreshDownload"
          >
            <van-list
              v-model="loadingDownload"
              :finished="finishedDownload"
              @load="onLoadDownload"
              :immediate-check="false"
            >
              <van-row
                class="section-item"
                v-for="(item, index) in listDownload"
                :key="index"
                @click.native="jumpToDetail(item)"
              >
                <van-col class="section-item-index" span="2">
                  {{ index + 1 }}
                </van-col>
                <van-col class="section-item-left" span="6">
                  <div class="section-img">
                    <img :src="item.logo">
                  </div>
                </van-col>
                <van-col span="12">
                  <p class="section-item-title">{{ item.name }}</p>
                  <p class="section-item-desc">{{ item.short_desc }}</p>
                  <!-- <p class="section-item-label">
                    <span>{{ item.label }}</span>
                  </p> -->
                </van-col>
                <van-col span="4" style="text-slign: right;">
                  <van-button
                    class="section-btn"
                    @click.stop="downLoadApk(item.ios_url, item.android_url)"
                  >访问</van-button>
                </van-col>
              </van-row>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="飙升">
          <van-pull-refresh
            v-model="isLoadingRaise"
            @refresh="onRefreshRaise"
          >
            <van-list
              v-model="loadingRaise"
              :finished="finishedRaise"
              @load="onLoadRaise"
              :immediate-check="false"
            >
              <van-row
                class="section-item"
                v-for="(item, index) in listRaise"
                :key="index"
                @click.native="jumpToDetail(item)"
              >
                <van-col class="section-item-index" span="2">
                  {{ index + 1 }}
                </van-col>
                <van-col class="section-item-left" span="6">
                  <div class="section-img">
                    <img :src="item.logo">
                  </div>
                </van-col>
                <van-col span="12">
                  <p class="section-item-title">{{ item.name }}</p>
                  <p class="section-item-desc">{{ item.short_desc }}</p>
                  <!-- <p class="section-item-label">
                    <span>{{ item.label }}</span>
                  </p> -->
                </van-col>
                <van-col span="4" style="text-slign: right;">
                  <van-button
                    class="section-btn"
                    @click.stop="downLoadApk(item.ios_url, item.android_url)"
                  >访问</van-button>
                </van-col>
              </van-row>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="新锐">
          <van-pull-refresh
            v-model="isLoadingNew"
            @refresh="onRefreshNew"
          >
            <van-list
              v-model="loadingNew"
              :finished="finishedNew"
              @load="onLoadNew"
              :immediate-check="false"
            >
              <van-row
                class="section-item"
                v-for="(item, index) in listNew"
                :key="index"
                @click.native="jumpToDetail(item)"
              >
                <van-col class="section-item-index" span="2">
                  {{ index + 1 }}
                </van-col>
                <van-col class="section-item-left" span="6">
                  <div class="section-img">
                    <img :src="item.logo">
                  </div>
                </van-col>
                <van-col span="12">
                  <p class="section-item-title">{{ item.name }}</p>
                  <p class="section-item-desc">{{ item.short_desc }}</p>
                  <!-- <p class="section-item-label">
                    <span>{{ item.label }}</span>
                  </p> -->
                </van-col>
                <van-col span="4" style="text-slign: right;">
                  <van-button
                    class="section-btn"
                    @click.stop="downLoadApk(item.ios_url, item.android_url)"
                  >访问</van-button>
                </van-col>
              </van-row>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
      <div class="circle" v-if="isCircleLoading">
        <van-loading :size="'100px'" color="black" />
      </div>
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      isCircleLoading: true,
      loadingRecommend: false,
      finishedRecommend: false,
      loadingDownload: false,
      finishedDownload: false,
      loadingRaise: false,
      finishedRaise: false,
      loadingNew: false,
      finishedNew: false,
      listRecommend: [],
      listDownload: [],
      listRaise: [],
      listNew: [],
      pageIndexRecommend: 0,
      pageCountRecommend: 10,
      pageIndexDownload: 0,
      pageCountDownload: 10,
      pageIndexRaise: 0,
      pageCountRaise: 10,
      pageIndexNew: 0,
      pageCountNew: 10,
      isLoadingRecommend: false,
      isLoadingDownload: false,
      isLoadingRaise: false,
      isLoadingNew: false
    }
  },
  mounted() {
    // 设置tabbar的active
    active_g = 3
    // 获取排行榜信息
    this.getRecommendData()
  },
  methods: {
    downLoadApk(iosUrl,androidUrl) {
    	if(this.andOrIos()) { //android
      	if(sessionStorage.getItem("usermessage")){
        	window.open(androidUrl)
      	}else{
      		this.$router.push("/login")
  			}
      }else{
        if(sessionStorage.getItem("usermessage")){
        	window.open(iosUrl)
      	}else{
      		this.$router.push("/login")
  			}
      }
    },
    jumpToDetail(appInfo) {
      this.$router.push({
        path: '/detail'
      });
      sessionStorage.setItem("appInfo", JSON.stringify(appInfo))
    },
    changeTabs(index, title) {
      this.isCircleLoading = true
      switch(index) {
        case 0:
          this.pageIndexRecommend = 0
          this.getRecommendData()
          break;
        case 1:
          this.pageIndexDownload = 0
          this.getDownloadData()
          break;
        case 2:
          this.pageIndexRaise = 0
          this.getRaiseData()
          break;
        case 3:
          this.pageIndexNew = 0
          this.getNewData()
          break;
      }
    },
    onLoadRecommend() {
      this.pageIndexRecommend ++
      this.getRecommendData()
    },
    onLoadDownload() {
      this.pageIndexDownload ++
      this.getDownloadData()
    },
    onLoadRaise() {
      this.pageIndexRaise ++
      this.getRaiseData()
    },
    onLoadNew() {
      this.pageIndexNew ++
      this.getNewData()
    },
    onRefreshRecommend() {
      setTimeout(() => {
        this.isCircleLoading = true
        this.pageIndexRecommend = 0
        this.listRecommend = []
        this.getRecommendData()
      }, 500);
    },
    onRefreshDownload() {
      setTimeout(() => {
        this.isCircleLoading = true
        this.pageIndexDownload = 0
        this.listDownload = []
        this.getDownloadData()
      }, 500);
    },
    onRefreshRaise() {
      setTimeout(() => {
        this.isCircleLoading = true
        this.pageIndexRaise = 0
        this.listRaise = []
        this.getRaiseData()
      }, 500);
    },
    onRefreshNew() {
      setTimeout(() => {
        this.isCircleLoading = true
        this.pageIndexNew = 0
        this.listNew = []
        this.getNewData()
      }, 500);
    },
    getRecommendData() {
      let params = {ordering: 'st_recommend'}
      if(this.pageIndexRecommend != 0) {
        params.page = this.pageIndexRecommend + 1
      }
      // 获取排行榜信息
      this.$axios({
        method: 'GET',
        url: url_g + '/app/',
        params: params
      }).then((res) => {
        if(res.data) {
          // this.listRecommend = res.data.results
          // this.isLoading = false

          let newArr = res.data.results
          this.pageCountRecommend = res.data.count

          for (let i = 0; i < newArr.length; i ++) {
            this.listRecommend.push(newArr[i])
          }

          this.loadingRecommend = false
          this.isLoadingRecommend = false
          this.isCircleLoading = false
          if (this.listRecommend.length >= this.pageCountRecommend) {
            this.finishedRecommend = true
          }
        }
      }).catch((e) => {
        console.error('GET err:' + e);
      });
    },
    getDownloadData() {
      let params = {ordering: 'st_download'}
      if(this.pageIndexDownload != 0) {
        params.page = this.pageIndexDownload + 1
      }
      // 获取排行榜信息
      this.$axios({
        method: 'GET',
        url: url_g + '/app/',
        params: params
      }).then((res) => {
        if(res.data) {
          // this.listDownload = res.data.results
          // this.isLoading = false

          let newArr = res.data.results
          this.pageCountDownload = res.data.count

          for (let i = 0; i < newArr.length; i ++) {
            this.listDownload.push(newArr[i])
          }

          this.loadingDownload = false
          this.isLoadingDownload = false
          this.isCircleLoading = false
          if (this.listDownload.length >= this.pageCountDownload) {
            this.finishedDownload = true
          }
        }
      }).catch((e) => {
        console.error('GET err:' + e)
      });
    },
    getRaiseData() {
      let params = {ordering: 'st_raise'}
      if(this.pageIndexRaise != 0) {
        params.page = this.pageIndexRaise + 1
      }
      // 获取排行榜信息
      this.$axios({
        method: 'GET',
        url: url_g + '/app/',
        params: params
      }).then((res) => {
        if(res.data) {
          // this.listRaise = res.data.results
          // this.isLoading = false

          let newArr = res.data.results
          this.pageCountRaise = res.data.count

          for (let i = 0; i < newArr.length; i ++) {
            this.listRaise.push(newArr[i])
          }

          this.loadingRaise = false
          this.isLoadingRaise = false
          this.isCircleLoading = false
          if (this.listRaise.length >= this.pageCountRaise) {
            this.finishedRaise = true
          }
        }
      }).catch((e) => {
        console.error('GET err:' + e);
      });
    },
    getNewData() {
      let params = {ordering: 'st_new'}
      if(this.pageIndexNew != 0) {
        params.page = this.pageIndexNew + 1
      }
      // 获取排行榜信息
      this.$axios({
        method: 'GET',
        url: url_g + '/app/',
        params: params
      }).then((res) => {
        if(res.data) {
          // this.listNew = res.data.results
          // this.isLoading = false

          let newArr = res.data.results
          this.pageCountNew = res.data.count

          for (let i = 0; i < newArr.length; i ++) {
            this.listNew.push(newArr[i])
          }

          this.loadingNew = false
          this.isLoadingNew = false
          this.isCircleLoading = false
          if (this.listNew.length >= this.pageCountNew) {
            this.finishedNew = true
          }
        }
      }).catch((e) => {
        console.error('GET err:' + e);
      });
    },
    andOrIos() {
      let u = navigator.userAgent;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      return isAndroid
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  margin: 0;
  font-size: 14px;
}
.rank-box {
  height: 100%;
  overflow: auto;
}
.container {
  padding: 0 0 20px 0;
  height: calc(100% - 20px);
  overflow: auto;
}
/*seciton*/
.section-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 85px;
}
.section-item-title {
  font-weight: bold;
  line-height: 24px;
  font-size: 14px;
}
.section-item-desc {
  color: #777;
  line-height: 20px;
  font-size: 12px;
}
.section-item-label {
  margin-top: 5px;
}
.section-item-label span {
  padding: 2px 6px;
  border: 1px solid orange;
  border-radius: 15px;
  color: orange;
  font-size:12px;
  font-size:9.6px;
  -webkit-transform: scale(0.80);
}
.section-btn {
  border: 1px solid #529ec2;
  color: #529ec2;
  /*padding: 3px 14px;*/
  font-size: 12px;
  border-radius: 15px;
  line-height: 12px;
  height: 24px;
  white-space: nowrap;
}
.section-item-index {
  text-align: center;
  /*padding: 0 0 0 10px;*/
}
.section-item-left {
  padding: 5px;
}
.section-img {
  width: 60px;
  height: 60px;
  overflow: hidden;
  /*padding: 5px;*/
}
.section-img img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  box-shadow: 0px 2px 10px #dadada;
}
/*seciton  over*/
.circle {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  width: 100%;
  text-align: center;
}
</style>
